<template>
  <div>
    <div class="order-pay_status">
      <div class="order-pay_status__tit">待支付···</div>
      <div class="order-pay_status__tip">订单超过30分钟自动取消，请在{{remainTime | formatTime}}内完成支付<van-icon name="success"
          class="order-pay__icon"></van-icon>
      </div>
    </div>
    <div class="order-pay__detail">
      <div class="order-pay__tit">
        订单总额
      </div>
      <div class="order-pay__price"><span class="unit">￥</span>{{params.total || 0.00}}</div>
      <!-- <div class="order-pay__detail__text">
        订单详情
        <van-icon name="arrow"></van-icon>
      </div> -->
      <van-radio-group v-model="radio" class="order-pay__way">
        <van-cell-group>
          <van-cell title="微信支付" clickable @click="radio = '1'">
            <i slot="icon" class="iconfont icon-weixin"></i>
            <van-radio name="1" checked-color="#07c160">
            </van-radio>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">订单编号：</div>
        <div class="order-pay__detail__item__content">W3783479238748</div>
      </div>
      <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">配送站：</div>
        <div class="order-pay__detail__item__content"></div>
      </div>
      <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">联系人：</div>
        <div class="order-pay__detail__item__content"></div>
      </div>
      <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">联系方式：</div>
        <div class="order-pay__detail__item__content">16888888888</div>
      </div>
      <div class="order-pay__detail__item order-pay__detail__item_price">
        <div class="order-pay__detail__item__tit">金额：</div>
        <div class="order-pay__detail__item__content">￥0.01</div>
      </div>
      <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">优惠券：</div>
        <div class="order-pay__detail__item__content">￥0.00</div>
      </div>
      <div class="order-pay__detail__item">
        <div class="order-pay__detail__item__tit">订单总额：</div>
        <div class="order-pay__detail__item__content">￥0.01</div>
      </div> -->
    </div>
    <van-button type="info" class="confirm-pay" @click="payOrder">确认付款</van-button>
  </div>
</template>

<script>
  import {
    setInterval
  } from 'timers';
  import {
    ORDER_PAY
  } from '@/api/stock'
  export default {
    data() {
      return {
        remainTime: 0, //30分钟倒数
        params: {},
        payParams: {},
        radio: '1'
      }
    },
    mounted() {
      this.params = this.$route.params;

      //计算剩余支付时间
      let orderTime = this.$route.query.time;
      this.remainTime = 30 * 60 * 1000 - (new Date().getTime() - orderTime)
      setInterval(() => {
        this.remainTime -= 1000;
      }, 1000);

      //监听返回
      // this.pushHistory();
      // window.addEventListener("popstate", this.goBack, false);
    },
    methods: {
      pushHistory() {
        window.history.pushState(null, null, document.URL);
      },
      //返回订单详情页
      goBack() {
        this.$router.push({
          name: 'stockOrderDetail',
          params: {
            id: this.params.orderNo
          }
        });
      },
      payOrder() {
        if (!this.params.prepayId) {
          this.$toast('未查询到该订单数据');
          return false;
        }
        this.$reqPost(ORDER_PAY + '?prepayId=' + this.params.prepayId + '&orderNo=' + this.params.orderNo).then(res => {
          this.payParams = res.data;
          if (typeof WeixinJSBridge) {
            // 唤起支付页面
            this.onBridgeReady();
          }
        }).catch(err => {
          this.$toast('支付失败');
        });

      },
      onBridgeReady() {
        WeixinJSBridge.invoke('getBrandWCPayRequest', this.payParams, (msg) => {
          if (msg.err_msg == "get_brand_wcpay_request:ok") {
            if (this.$route.params.type == 'debtList') {
              this.$toast('还款成功');
              this.$router.go(-1);
            } else {
              //支付成功后跳转的页面
              this.$router.replace({
                path: '/stockPaySuccess',
                query: {
                  num: this.params.orderNo
                }
              })
            }

          } else if (msg.err_msg == "get_brand_wcpay_request:cancel") {
            this.$router.replace({
              path: '/stockOrderDetail',
              params: {
                id: this.params.orderNo
              }
            })
          } else if (msg.err_msg == "get_brand_wcpay_request:fail") {
            this.$toast('支付失败');
            // WeixinJSBridge.call('closeWindow');
          } //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
        });
      }
    },
    filters: {
      formatTime(val) {
        let m = new Date(val).getMinutes();
        let s = new Date(val).getSeconds();
        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../../styles/variable.less';

  .order-pay_status {
    padding: 20px;
    color: #ffffff;
    font-size: 12px;

    .order-pay_status__tit {
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 24px;
    }

    .order-pay_status__tip {
      letter-spacing: 1px;
    }

    .order-pay__icon {
      position: relative;
      left: 2px;
      top: 2px;
      font-size: 14px;
    }
  }

  .order-pay__detail {
    position: relative;
    top: -110px;
    width: 80%;
    margin: 0 auto;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 30px 1px rgba(0, 0, 0, 0.2);

    .order-pay__tit {
      font-size: 14px;
      color: #545454;
      text-align: center;
      margin-bottom: 8px;
    }

    .order-pay__price {
      font-size: 30px;
      text-align: center;
      margin-bottom: 20px;

      .unit {
        font-size: 14px;
      }
    }

    .order-pay__detail__text {
      font-size: 10px;
      color: #545454;
      text-align: center;
      margin: 8px 0;

      i {
        position: relative;
        top: 2.5px;
      }
    }

    .order-pay__detail__item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 14px;

      &.order-pay__detail__item_price {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #dddddd;
      }

      .order-pay__detail__item__tit {
        color: #999;
      }

      .order-pay__detail__item__content {
        color: #545454;
      }
    }
  }

  .order-pay__way .van-cell {
    padding: 10px 0;

    .iconfont {
      margin-right: 10px;

      &.icon-weixin {
        color: #07c160;
      }
    }
  }

  .order-pay_status {
    height: 160px;
    background: @col-linear;
  }

  .confirm-pay {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

</style>
